<template>
  <el-drawer
    append-to-body
    size="900px"
    :title="drawer.title"
    :wrapperClosable="true"
    :visible.sync="drawer.show"
  >
    <!-- :withHeader="false" -->
    <template #title>
      <h3 style="color: #41e4ff; margin: 0px">{{ drawer.company }}</h3>
    </template>
    <div class="diy-drawer-content-title">
      <div class="equipType display-flex jc-space-between">
        <el-form
          :inline="true"
          size="small"
          v-model="queryParams"
          label-width="60px"
        >
          <el-form-item :label="queryName" style="margin: 0px">
            <el-select
              style="width: 300px"
              @change="changeDevice"
              filterable
              v-model="queryParams.deviceId"
              placeholder="请选择设备"
              clearable
            >
              <el-option
                v-for="(item, index) in deviceOptions"
                :key="index"
                :label="item.deviceName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="showContent" class="diy-drawer-content">
        <title-decoration-2 class="drawer_top mb-20" title="监测总览">
          <drawerTop ref="topRef" :deviceFormId="deviceFormId"></drawerTop>
        </title-decoration-2>
        <title-decoration-2 class="drawer_middle mb-20" title="传感器列表">
          <drawerMiddle
            ref="middleRef"
            :deviceFormId="deviceFormId"
            :enterpriseId="enterpriseId"
            @returnData="returnData"
          ></drawerMiddle>
        </title-decoration-2>
        <el-row :gutter="20">
          <el-col :span="12">
            <title-decoration-2
              class="drawer-bottom_left"
              title="实时数值折线图"
            >
              <drawerBottomLeft ref="bottomLeftRef"></drawerBottomLeft>
            </title-decoration-2>
            <!-- <title-decoration-2  v-else class="drawer-middle_left" title="实时数值折线图">
        </title-decoration-2> -->
          </el-col>
          <el-col :span="12">
            <title-decoration-2 class="drawer-bottom_right" title="监控摄像头">
              <template #button>
                <el-button
                  type="text"
                  style="padding: 0px"
                  @click="$router.push({ path: '/monitor/index' })"
                  >查看全部</el-button
                >
              </template>
              <drawerBottomRight
                ref="bottomRightRef"
                :enterpriseId="enterpriseId"
              ></drawerBottomRight>
            </title-decoration-2>
          </el-col>
        </el-row>
      </div>
      <el-empty v-else description="没有设备,无法显示数据总览"></el-empty>
    </div>
  </el-drawer>
</template>
<script>
import drawerTop from "./drawerTop.vue";
import drawerMiddle from "./drawerMiddle.vue";
import drawerBottomLeft from "./drawerBottomLeft.vue";
import drawerBottomRight from "./drawerBottomRight.vue";
export default {
  name: "drawer-bm-info",
  components: {
    drawerTop,
    drawerMiddle,
    drawerBottomLeft,
    drawerBottomRight,
  },
  props: {},
  data() {
    return {
      drawer: {
        title: "",
        company: null,
        show: false,
        form: {},
      },
      deviceOptions: [], // 设备列表
      queryParams: {
        deviceId: "",
        deviceName: "",
      },
      enterpriseId: null,
      showContent: false,
    };
  },
  computed: {
    queryName() {
      return this.$route.query.name;
    },
  },
  methods: {
    init(obj) {
      this.getDeviceList(obj.id);
      this.queryParams.deviceId = "";
      this.enterpriseId = obj.id;
      this.drawer.company = obj.name;
      this.drawer.title = obj.name;
    },
    getDeviceList() {
      // 请求设备
      let res = [
        {
          id: "fca663edd26d4e69b39ed8e75d2f3500",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-1",
          deviceNum: "S1200354C00083",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "ad349e3a69d84dd3aad907b264ddf426",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-2",
          deviceNum: "S1200354C00075",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-02 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "38175c8a77f547f4b392177205d8a49b",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-3",
          deviceNum: "S1200354C00066",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "61b8766aca6541b2ba9ab68efd90715f",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-4",
          deviceNum: "S1200354C00076",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "4d9941e9d3f84a00a577d7e296c55b38",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-5",
          deviceNum: "S1200354C00084",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "13ac0ce9141a413d8574dc94be48917c",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-6",
          deviceNum: "S1200354C00074",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-01-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "5e7ac3e0f7f14b0e972296b60cc5e534",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-7",
          deviceNum: "S1200354C00088",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "d0bc85a9fb7a40fb92c8c55992102b39",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-8",
          deviceNum: "S1200250S00499",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-02-03 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "7a8dc2d6d838442aba116b8472e495b2",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器1-9",
          deviceNum: "S1200354C00073",
          gateWayId: "b71b00dff96c437d8c665abd432f5535",
          gateWay: "8107202108028",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "0b250baf4e8a4df78f04810ab1ba16ca",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-1",
          deviceNum: "S1200354C00090",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "7cf3615231e34b1dbb115df1ae6707f6",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-2",
          deviceNum: "S1200354C00077",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "e634ba9b88d64ec0b81224bd6a0d3005",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-3",
          deviceNum: "S1200354C00078",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "bd4f465dd2fa46aba0e2a3706d35f1b8",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-4",
          deviceNum: "S1200354C00085",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "c001b4cb1fb743938aa9f485bea430d6",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-5",
          deviceNum: "S1200354C00065",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "49b120b1c9074f7283c29bf57c55bd8f",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-6",
          deviceNum: "S1200354C00056",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "62ac969618f14b82b764de99e127b03e",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-7",
          deviceNum: "S1200354C00070",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
        {
          id: "1e6a586060174d4fa506d39d232170c8",
          enterpriseId: "6294d10c867e4d76834a58e9c460b2f1",
          deviceName: "可燃气体探测器2-8",
          deviceNum: "S1200354C00058",
          gateWayId: "9f7c6212e5de42d5847d50624498cf86",
          gateWay: "8107202009039",
          installDate: "2021-07-01 00:00:00.0",
          pictureUrl: "",
          remark: "",
          status: 0,
          channel: null,
          playUrl: null,
          equipTypeId: "249dec8c5fbd421195c2787e2a5cd179",
          equipTypeName: "可燃性气体浓度检测",
          isNeedSynchron: 0,
          synchronStatus: 0,
          altField: "甲烷",
        },
      ];
      if (res.length > 0) {
        // 将类型是摄像头的设备除外
        this.deviceOptions = res.filter(
          (item) => item.equipTypeId !== "249dec8c5fbd421195c2787e2a5cd173"
        );
        this.$nextTick(() => {
          this.deviceFormId = res[0].id;
          // eslint-disable-next-line no-empty
          if (this.queryParams.deviceId) {
          } else {
            this.queryParams.deviceId = res[0].id;
          }
          this.drawer.show = true;
          this.showContent = true;
        });
      }
    },

    // 选择设备
    changeDevice(val) {
      if (val) {
        this.showContent = true;
        this.$nextTick(() => {
          this.getDeviceList(this.enterpriseId);
          this.queryParams.deviceId = val;
          this.$refs.topRef.getData(val);
          this.$refs.middleRef.getData(val);
        });
      } else {
        this.showContent = false;
        // this.$refs.topRef.getData(val)
        // this.$refs.middleRef.getData(val)
      }
    },
    // 传感器列表返回值
    returnData(data) {
      if (data) {
        this.$refs.bottomLeftRef.sensorForm = data;
        this.$refs.bottomLeftRef.getData(data);
      } else {
        this.$refs.bottomLeftRef.sensorForm = {};
        this.$refs.bottomLeftRef.getData("");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  background-color: rgba(0, 0, 0, 0.6);
  .diy-drawer-content-title {
    padding: 0px 20px;
    color: #41e4ff;
    // border-bottom: 1px solid rgba(255, 255, 255, .38)
  }
  .diy-drawer-content {
    height: calc(100vh - 80px);
    .drawer_top {
      height: 240px;
    }
    .drawer_middle {
      // height: 240px;
      // border: 1px solid red;
    }
  }
}
::v-deep .el-empty {
  .el-empty__image {
    color: #41e4ff;
  }
  .el-empty__description {
    p {
      color: #41e4ff;
    }
    // color: #41E4FF;
  }
}
::v-deep .el-input .el-input__inner {
  text-align: start !important;
}

.drawer-bottom_left,
.drawer-bottom_right {
  height: 300px;
}
</style>
